<template>
  <view class="inputselect">
    <view style="position:relative;">
      <tn-input class="valText" v-model="value" type="select" :selectOpen="selectShow" @click="selectShow = true"/>
      <view class="label">{{ labelComputed }}</view>
    </view>
    <tn-select class="select" v-model="selectShow" mode="single" :list="list" @confirm="confirm"
               :labelName="keyValue.label" :valueName="keyValue.value"></tn-select>
  </view>
</template>
<script>
export default {
  props: {
    keyValue: {
      type: Object,
      default: () => {
        return {
          label: 'label',
          value: 'value'
        }
      }
    },
    value: {
      type: [String, Number],
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    labelComputed() {
      const item = this.list.find(item => item[this.keyValue.value] === this.value);
      return item ? item[this.keyValue.label] : '';
    }
  },
  data() {
    return {
      selectShow: false,
    };
  },
  methods: {
    confirm(val) {
      this.$emit('input', val[0].value);
      this.$emit('change', val);
    }
  }
};
</script>
<style scoped lang="scss">
.inputselect {
  flex: 1;

  .valText {
    ::v-deep .tn-input__text {
      color: transparent;
    }
  }

  .label {
    position: absolute;
    top: 0;
    pointer-events: none;
    width: calc(100% - 20rpx);
    //background: #0a76a4;
  }

  .select {
    ::v-deep .tn-select__content__body__search {
      line-height: normal;
    }
  }
}

</style>
